﻿@model DoeLibsMVC.Models.RegisterModel

@{
    ViewBag.Title = "Register";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div id="registerForm" class="formDesignDiv">
	@using (Html.BeginForm("Register", "Authentification", FormMethod.Post))
    {
        <h2 class="centeredHeaderText">Register</h2>

     <table class="formTable">
		 <tbody>			 
			 <tr>
				 <td>
					 @Html.LabelFor(model => model.FirstName)
				 </td>
				 <td>
					<div>
						@Html.TextBoxFor(model => model.FirstName, new { @class = "generalTxtBox", @placeholder = "first name" })
						@Html.ValidationMessageFor(model => model.FirstName)
					</div>
				 </td>
			 </tr>
			 <tr>
				 <td>
					 @Html.LabelFor(model => model.LastName)
				 </td>
				 <td>
					<div>
						@Html.TextBoxFor(model => model.LastName, new { @class = "generalTxtBox", @placeholder = "last name" })
						@Html.ValidationMessageFor(model => model.LastName)
					</div>
				 </td>
			 </tr>
			 <tr>
				 <td>
					 @Html.LabelFor(model => model.EMail)
				 </td>
				 <td>
					<div>
						@Html.TextBoxFor(model => model.EMail, new { @class = "generalTxtBox", @placeholder = "e-mail" })
						@Html.ValidationMessageFor(model => model.EMail)
					</div>
				 </td>
			 </tr>
			 <tr>
				 <td>
					 @Html.LabelFor(model => model.Password)
				 </td>
				 <td>
					<div>
						@Html.TextBoxFor(model => model.Password, new { @class = "generalTxtBox", @placeholder = "password", @type = "password" })
						@Html.ValidationMessageFor(model => model.Password)
					</div>
				 </td>
			 </tr>
			 <tr>
				 <td>
					 @Html.LabelFor(model => model.ConfirmPassword)
				 </td>
				 <td>
					<div>
						@Html.TextBoxFor(model => model.ConfirmPassword, new { @class = "generalTxtBox", @placeholder = "confirm password", @type = "password" })
						@Html.ValidationMessageFor(model => model.ConfirmPassword)
					</div>
				 </td>
			 </tr>
			 <tr>
				 <td>
					 @Html.LabelFor(model => model.AcceptorId)
				 </td>
				 <td>
					<div>
						@Html.DropDownListFor(model => model.AcceptorId, Model.StaffMembers, new { @class = "registerDropDownList" })
						@Html.ValidationMessageFor(model => model.AcceptorId)
					</div>
				 </td>
			 </tr>
			 <tr>
				 <td>
					 @Html.LabelFor(model => model.CategoryId)
				 </td>
				 <td>
					<div>
						@Html.DropDownListFor(model => model.CategoryId, Model.Categories, new { @class = "registerDropDownList", onchange = "toggleStaffRequiredFields()" })
						@Html.ValidationMessageFor(model => model.CategoryId)
					</div>
				 </td>
			 </tr>
			 <tr class="onlyForStaffRequired">
				 <td>
					 @Html.LabelFor(model => model.Room)
				 </td>
				 <td>
					<div>
						@Html.TextBoxFor(model => model.Room, new { @class = "generalTxtBox", @placeholder = "room" })
						@Html.ValidationMessageFor(model => model.Room)
					</div>
				 </td>
			 </tr>
			 <tr class="onlyForStaffRequired">
				 <td>
					 @Html.LabelFor(model => model.UniPhone)
				 </td>
				 <td>
					<div>
						@Html.TextBoxFor(model => model.UniPhone, new { @class = "generalTxtBox", @placeholder = "uniphone" })
						@Html.ValidationMessageFor(model => model.UniPhone)
					</div>
				 </td>
			 </tr>
			 <tr>
				 <td></td>
				 <td>
					<input type="submit" value="register" class="generalBtn" />
				 </td>
			 </tr>
		</tbody>
     </table>
    }
</div>

<script type="text/javascript">


    function toggleStaffRequiredFields() {
        if ($('#CategoryId').val() == 1) {
            $('.onlyForStaffRequired').show();
        } else {
            $('.onlyForStaffRequired').hide();
        }
    }

    $(document).ready(function () {
        //student is default category:
        $("#CategoryId option").each(function () {
            if ($(this).val() == "2") {
                $(this).attr("selected", true);
            } else {
                $(this).removeAttr("selected");
            }
        });


        toggleStaffRequiredFields();
    });
</script>